<template>
  <div
    class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
    @click="openDrawer"
  >
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col mb-6 gap-y-1">
      <common-title-module />
      <div class="flex items-center mb-2">
        <p class="node-sub-text">输入</p>
        <div class="typeof-list" ref="typeofRef">
          <Tooltip
            theme="light"
            transfer
            :content="data.intentionvo.vartype"
            placement="top"
          >
            <div class="typeof-item" v-if="data.intentionvo.varname">
              {{ data.intentionvo.varname }}
            </div>
            <div v-else class="typeof-item warning">未定义</div>
          </Tooltip>
        </div>
      </div>
    <div class="flex items-center mb-2">
      <p class="node-sub-text">输出</p>
      <div class="typeof-list" ref="typeofRef">
        <Tooltip theme="light" transfer content="Integer" placement="top">
          <div class="typeof-item">classificationId</div>
        </Tooltip>
        <Tooltip theme="light" transfer content="String" placement="top">
          <div class="typeof-item">reason</div>
        </Tooltip>
      </div>
    </div>
    </div>

    <div
      class="flex items-center mb-2"
      v-for="(selection, index) in data.intentionlist"
      :key="index"
    >
      <p class="node-sub-text">选项</p>
      <p
        class="flex-1 ml-2 text-xs truncate"
        v-if="selection.name"
        :title="selection.name"
      >
        {{ selection.name }}
      </p>
      <div v-else class="ml-2 text-xs text-gray-300">未配置内容</div>
      <Handle
        :id="'source-' + index"
        type="source"
        :position="Position.Right"
        style="top: auto; translate: 50% 0%"
      />
    </div>

    <div class="flex items-center justify-between">
      <p class="node-sub-text">其他</p>
      <Handle
        :id="'source-' + data.length"
        type="source"
        :position="Position.Right"
        style="top: auto; translate: 50% 0%"
      />
    </div>
  </div>
  <IntentDrawerModule
    ref="drawerRef"
    :title="node?.node?.label"
    :form="data"
    @add="handleClickAddBtn"
    @remove="handleClickDeleteBtn"
    @cancel="onCancel"
  />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { editNode } from '@/api/modules/flow';

import CommonTitleModule from '../modules/common-title-module.vue';
import IntentDrawerModule from '../modules/intent-drawer-module.vue';

defineProps();

const node = useNode();

const data = ref({
  selectmodel: node.node.data?.selectmodel ||'',
  modetype: node.node.data?.modetype || 'topspeed',
  systempromptword: node.node.data?.systempromptword || '',
  intentionvo: node.node.data?.intentionvo || {
    varname: 'query',
    vartype: 'String',
    varparam: ''
  },
  intentionlist: node.node.data?.intentionlist || [
    {
      name:'',
    },
  ],
  excepjsondata: node.node.data?.excepjsondata || {
    timeout: 60,
    retrycount: '不重试',
    excepmethod: '中断流程',
  },
});

const drawerRef = ref(null);
const openDrawer = () => {
  drawerRef.value?.init();
};

function handleClickAddBtn() {
  data.value.intentionlist.push({
    name: '',
  });
  node.node.data = {
    ...node.node.data,
  };
}

function handleClickDeleteBtn(index) {
  data.value.intentionlist.splice(index, 1);
  node.node.data = {
    ...node.node.data,
  };
}

const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}

</script>
